<template>
  <div class="noticeClass">
    <div class="close pbtn" @click="_showNotice = false"></div>
    <span class="box_title" @click="playAmimation">
      <i style="background-image: url('/imgs/index/icon_4.png'); width: 24px; height: 20px"></i>
      <p>校园公告</p>
    </span>
    <div class="text_content">
      <h3>{{ props.noticeDat.noticeTitle }}</h3>
      <span>
        <p>发布作者：{{ props.noticeDat.createBy }}</p>
        <p style="margin-left: 20px">发布时间：{{ props.noticeDat.createTime }}</p>
      </span>
      <div
        style="
          width: 566px;
          height: 1px;
          border: 1px solid #5db4ff;
          opacity: 0.7;
          margin: 10px auto;
        "
      ></div>
      <!-- <div
        style="width: 100%; height: 100%; position: absolute"
        ref="lottieDemo"
        id="lottieDemo2"
      ></div> -->
      <div class="txt_commom" ref="noticeRef">
        <!-- {{ props.noticeDat.noticeContent }} -->
      </div>
    </div>
  </div>
</template>

<script setup>
// import Lottie from './lottie.vue'
import { ref, watch, computed, onMounted, nextTick } from 'vue'
import { useStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
// import Animation from '@/assets/lottie/ceshi.json'

const store = useStore()

const noticeRef = ref(null)

const { _showNotice } = storeToRefs(store)

const props = defineProps({
  noticeDat: Object
})
// watch(
//   () => props.noticeDat,
//   (newVal) => {
//     console.log(newVal)
//     noticeRef.value.innerHTML = newVal.noticeContent
//   }
// )
// const a1 = ref(null)
// const getAnimation = (animation) => {
//   console.log(animation)
//   a1.value = animation
//   if (a1.value) {
//     a1.value.addEventListener('enterFrame', () => {
//       // console.log(a1.value, '--a1.value--');
//       if (a1.value.currentFrame >= 63) { // 当前帧
//         a1.value.goToAndPlay(0, true) // 跳转到指定帧开始
//       }
//     })
//     a1.value.addEventListener('complete', () => {
//       console.log('播放完毕');
//     })
//   }
// }
const innerHTMLTxt = computed(() => {
  return props.noticeDat.noticeContent
})
const lottieDemo = ref(null)
// const animation = lottie.loadAnimation({
//   container: document.getElementById('lottieDemo2'),
//   renderer: 'svg',
//   loop: true,
//   autoplay: true,
//   animationData: lottieJson
// })
// animation.addEventListener('data_ready', () => {}) // 动画数据加载完毕
// animation.addEventListener('config_ready', () => {}) // 完成初始配置后
// animation.addEventListener('data_failed', () => {}) // 加载动画数据失败
// animation.addEventListener('loaded_images', () => {}) // 所有图片加载成功或者失败
// animation.addEventListener('DOMLoaded', () => {
//   console.log('DOMLoaded')
// }) // 将元素添加到DOM后

// const playAmimation = () => {
//   animation.play()
// }
onMounted(() => {
  nextTick(() => {
    noticeRef.value.innerHTML = innerHTMLTxt.value
  })
})
</script>

<style lang="scss" scoped>
.noticeClass {
  width: 655px;
  height: 512px;
  background-image: url(/imgs/notice/notice_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;

  .close {
    background-image: url('/imgs/notice/close_icon.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    position: absolute;
    top: 20px;
    right: 25px;
  }
}
.box_title {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  padding: 0 20px;

  p {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    color: #ffffff;
    margin-left: 11px;
  }
}
.text_content {
  width: 100%;
  height: calc(100% - 55px);
  padding: 20px;
  display: flex;
  flex-direction: column;

  h3 {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 22px;
    color: #171a1d;
    margin: 0 auto;
  }
  span {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    justify-content: center;
    margin-top: 10px;
    p {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #7d8a96;
    }
  }
  .txt_commom {
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
    padding: 0 20px;
  }
}
</style>
